<template>
  <a-space class="top-actions">
    <enterprise/>
    <a-button type="text" class="ant-btn-icon-only">
      <a-badge dot><bell-outlined/></a-badge>
    </a-button>
    <a-button type="text" class="ant-btn-icon-only">
      <question-circle-outlined/>
    </a-button>
    <a-dropdown>
      <a-button type="text" class="btn-space-compact">
        <a-avatar v-if="store.userInfo.avatar" :src="store.userInfo.avatar" size="small"/>
        <a-avatar v-else style="background-color: #f0f0f0" size="small"><user-outlined/></a-avatar>
        <span class="padding-left-sm">{{store.userInfo.username}}</span>
        <down-outlined class="font-size-ssm margin-left-sm"/>
      </a-button>
      <template #overlay>
        <a-menu @click="onClick">
          <a-menu-item key="profile"><user-outlined/> 个人设置</a-menu-item>
          <a-menu-item key="team"><user-switch-outlined/> 切换团队/企业</a-menu-item>
          <a-menu-divider/>
          <a-menu-item key="logout"><logout-outlined/> 退出登录</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-space>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  BellOutlined,
  UserSwitchOutlined,
  LogoutOutlined,
  DownOutlined,
  QuestionCircleOutlined
} from "@ant-design/icons-vue";
import {useRouter} from "vue-router";
import {useUserStore} from "@/store/user";
import Enterprise from "@/layouts/components/Enterprise.vue";

const store = useUserStore()
const router = useRouter();
const onClick = ({key}) => {
  if (key === 'profile') router.push('/profile')
  if (key === 'logout') router.push('/login')
};
</script>

<style scoped>

</style>